<template>
  <div class="create">
    <!-- 顶部step -->
    <create-step :active="active" :step-array="stepArray"/>

    <!-- 第一步表单 -->
    <component v-if="active === 0" :is="first" :first-form="formData" @push="changeStep" @next="firstNext"/>

    <!-- 第二步表格 -->
    <keep-alive>
      <component v-if="active === 1" :is="second" :select-data="secondSelectData" @secondNext="secondNext" @secondBack="sceondBack"/>
    </keep-alive>

    <!-- 第三步表格 -->
    <create-third v-if="active === 2" :table-data="secondSelectData" :id="formData.id" @thirdNext="thirdNext" @thirdBack="thirdBack"/>
    <!-- 第四步表格 -->
    <completed v-if="active === 3" />
    <!-- 蓝色底部提示框 -->
    <div v-if="active === 0" class="foot">
      <div v-for="(item,index) in foot" :key="index">{{ item.title }}</div>
    </div>
  </div>
</template>

<script>
import CreateStep from './create/step'
import CreateFirst from './create/firstform'
import CreateSecond from './create/secondform'
import CreateThird from './create/thirdform'
import Completed from './create/completed'
import { getTenantId, getUserId, getUserName } from '@/utils/auth'
import { addDiscount, updateDiscount, getCourseById } from '@/api/operate/discount' // 接口
export default {
  components: {
    CreateStep,
    CreateFirst,
    CreateSecond,
    CreateThird,
    Completed
  },
  data() {
    return {
      first: 'CreateFirst',
      second: 'CreateSecond',
      finalStep: 3,
      active: 0,
      stepArray: [],
      firstposition: true,
      otherposition: false,
      step: {
        limitDiscount: [
          {
            title: '设置活动信息'
          },
          {
            title: '选择课程'
          },
          {
            title: '设置优惠'
          },
          {
            title: '完成'
          }
        ],
        limitFree: [
          {
            title: '设置活动信息'
          },
          {
            title: '选择课程'
          },
          {
            title: '完成'
          }
        ],
        allDiscount: [
          {
            title: '设置活动信息'
          },
          {
            title: '完成'
          }
        ]
      },
      foot: [
        {
          title: '设置了限时打折的课程，将以相应折扣价格被用户购买'
        },
        {
          title: '设置了限时免费的课程，用户可以免费加入课程学习'
        },
        {
          title: '设置了全站打折的活动，全站已发布的课程将以相应折扣价格被用户购买'
        },
        {
          title: '活动到期后，课程自动恢复原来的价格'
        }
      ],
      formData: {},
      secondSelectData: []
    }
  },
  watch: {
    active() {
      if (this.active !== 0) {
        this.firstposition = false
        this.otherposition = true
      } else {
        this.firstposition = true
        this.otherposition = false
      }
    }
  },
  created() {
    this.getEditData()
  },
  methods: {
    getEditData() {
      if (this.$route.params.id) {
        this.formData = this.$route.params
        this.active = Number(this.formData.editStep)
        if (this.formData.targetIds) {
          this.formData.targetIds.split(',').forEach(id => {
            getCourseById(id).then(res => {
              this.secondSelectData.push(res.data.item)
            })
          })
        }
        this.changeStep(this.formData.type)
      } else {
        // 初始化step组件的传值
        this.stepArray = this.step.limitDiscount
        this.formData.type = 'limitDiscount'
      }
    },
    // 单选框改变Step值
    changeStep(val) {
      this.stepArray = this.step[val]
      if (val === 'limitDiscount') this.finalStep = 3
      if (val === 'limitFree') this.finalStep = 2
      if (val === 'allDiscount') this.finalStep = 1
    },
    firstNext(val) {
      this.active++
      this.formData = Object.assign({}, val)
      this.formData.editStep = 1
      this.formData.auditStatus = 'edit'
      this.updateDiscount()
    },
    secondNext(val) {
      this.active++
      this.secondSelectData = val
      let targetIds = ''
      val.forEach(item => {
        targetIds += item.id + ','
      })
      this.formData.targetIds = targetIds.substring(0, targetIds.length - 1)
      this.formData.editStep = 2
      this.formData.auditStatus = 'edit'
      this.updateDiscount()
    },
    sceondBack() {
      this.active--
      this.formData.editStep = 0
      this.updateDiscount()
    },
    thirdNext() {
      this.active++
      this.formData.editStep = 3
      this.formData.auditStatus = 'audit'
      this.updateDiscount()
    },
    thirdBack() {
      this.active--
      this.formData.editStep = 1
      this.updateDiscount()
    },
    updateDiscount() {
      if (this.formData.id) {
        updateDiscount(this.formData).then(res => {
          if (this.formData.editStep === 3) {
            this.$notify({
              title: '成功',
              message: '打折活动创建成功！',
              type: 'success',
              duration: 2000
            })
            this.$router.push('/operate/discount')
          }
        })
      } else {
        this.formData.userId = getUserId()
        this.formData.userName = getUserName()
        this.formData.tenantId = getTenantId()
        addDiscount(this.formData).then(res => {
          console.log(res)
          this.formData.id = res.data.id
        })
      }
    }
  }
}
</script>

<style lang="scss">
.create {
  padding: 0 20px;
  .button {
    width: 100%;
    .otherposition {
      float: right;
    }
    .firstposition {
      margin-top: 30px;
      margin-left: 318px;
    }
  }
  .foot {
    margin-top: 40px;
    width: 100%;
    padding: 15px 60px;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #d9edf7;
    color: #326f8f;
    border-left: 5px solid #50bfff;
    div {
      margin-bottom: 5px;
    }
  }
}
</style>
